<template>
    <div class="full_screen banner_bg">
        <div class="w1200">
            <div class="main_content_box">
                <div class="main_content">
                    <div class="left-conner">
                        <el-carousel trigger="click">
                            <el-carousel-item v-for="item in filteredCawData"  :key="item.id">
                                <img :src="item.image" alt="">
                            </el-carousel-item>
                           
                        </el-carousel>
                    </div>
                    <div class="right_list">
                        <div class="tab_tit">
                            <span  >CIFA考试动态</span>
                            <span   @click="router.push('/cawList/1')">查看更多>></span>
                        </div>
                        <div class="bk_box"  >
                            <a  @click="checkItem(item.id)" v-for="item in cawData" :key="item.id">
                                {{ item.name }}
                                <span v-text="dayjs(item.createTime).format('YYYY-MM-DD')"> </span>
                            </a>

                        </div>
                     

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 合作伙伴活动 -->
    <div class="full_screen">
        <div class="w1200">

            <div class="p_gridbox">
                <div class="w_grid" style="margin-right: 50%;margin-left: 0;">

                    <h2 class="h2Style">
                        <img src="../../assets/img/考试须知.png">
                        CIFA考试须知
                    </h2>
                    <div class="w_text">
                        <p>CIFA考试可以选择投资分析和企业理财两个认证方向，学员可以根据自己的职业需求报名相关科目，另外也可以同时参加上述两个方向的考试。</p>
                    </div>
                    <div class="w_fbtn">
                        <a href="/list_58/" class="e_link" title="查看更多">查看更多</a>
                    </div>

                </div>
            </div>
            <div class="p_gridbox p_gridbox2">
                <div class="w_grid">

                    <h2 class="h2Style">
                        <img src="../../assets/img/考试时间.png">
                        CIFA考试时间
                    </h2>
                    <div class="w_text">
                        <p>CIFA全国统一考试采用线上机考(定制班除外)，每年组织四次，分别在4月、7月、9月、12月，通常是周六，上午项目一、下午科目二科目三。</p>
                    </div>
                    <div class="w_fbtn">
                        <a href="/list_59/" class="e_link" title="查看更多">查看更多</a>
                    </div>

                </div>
            </div>
            <div class="p_gridbox">
                <div class="w_grid" style="margin-right: 50%;margin-left: 0;">

                    <h2 class="h2Style">
                        <img src="../../assets/img/考试大纲1.png">
                        CIFA考试大纲
                    </h2>
                    <div class="w_text">
                        <p>CIFA考试大纲内容包括四个模块：研究分析、投融资基础、投资实务和融资实务。内容涉及宏观、行研、财报、估值、投资、融资等20多个专题。</p>
                    </div>
                    <div class="w_fbtn">
                        <a href="/list_60/" class="e_link" title="查看更多">查看更多</a>
                    </div>

                </div>
            </div>





        </div>
    </div>
</template>
<script setup lang="ts">
 import router from '@/router';
 import {  cawListApi} from "@/api/exam/index";
import type { CawModel,CawParam } from "@/api/exam/index";
import dayjs from 'dayjs';
const cawParam=ref<CawParam>({
    pageNum:1,
    pageSize:10,
    type:1,
    isTopic:''
})
const cawData=ref<CawModel[]>([]) 
// 计算属性：过滤推荐内容
const filteredCawData = computed(() => {
    return cawData.value.filter(item => item.recommend === 1);
});

onMounted(() => {
    cawListApi(cawParam.value).then((res:any)=>{
        console.log(res)
        if(res.code===200){
            cawData.value= res.data.records
            
        }else{
            ElMessage.error(res.msg)
        }
    })
})

function checkItem(id:any){
    router.push(`/cifaItem/${id}`)
}

</script>
<style scoped lang='less'>
.banner_bg {
    background: url(../../assets/img/shangwai.jpg) no-repeat;
    background-size: cover;
    margin-bottom: 50px;
}

.full_screen {
    width: 100%;
    display: flex;
}

.w1200 {
    width: 1300px;
    margin: 0 auto;
}

.main_content_box {
    display: flex;
    padding: 50px 0;
}

.left-conner {
    width: 600px;
    height: 360px;
}

.tab_tit {
    height: 60px;
    line-height: 60px;
    width: 100%;
    border-bottom: 1px solid #eee;
    display: flex;
    padding-left: 30px;
    box-sizing: border-box;
    font-size: 18px; 
    color: #333;
    justify-content: space-between;
    
}

.tab_tit span {
    cursor: pointer;
    margin-right: 65px;
}

.tab_tit .active {
    color: #496bb2;
    position: relative;
}

.tab_tit .active::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    display: block;
    width: 55px;
    height: 4px;
    background-color: #496bb2;
    content: '';
}

.main_content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.main_content .left_m {
    width: 500px;
}

.main_content .left_m img {
    display: block;
    width: 100%;
    height: 290px;
}

.main_content .left_m p {
    width: 100%;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    background-color: #496bb2;
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main_content .right_list {
    background: #fff;
    width: 650px;
    box-sizing: border-box;
}

.main_content .right_list .bk_box {
    background: #fff;
    padding: 20px;
    height: 300px;
    /*box-sizing: border-box;
        box-shadow: 0px 0px 4px 2px #f3f4f9;*/
}
.bk_box a{
    cursor: pointer;
}

.main_content .right_list a {
    display: block;
    width: 100%;
    font-size: 14px;
    color: #666;
    padding: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main_content .right_list a:hover {
    color: #f25149;
}

.main_content .right_list a i {
    font-style: normal;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #afb0b3;
    vertical-align: middle;
    margin-right: 5px;
}

.main_content .right_list a span {
    float: right;
}

.main_content .right_list a:first-child {
    padding-top: 0;
}

.main_content .right_list a:last-child {
    padding-bottom: 0;
    border: 0;
}

.hide {
    display: none !important;
}

.swiper-container {
    margin: 0;
}

.se2new-swiper a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-size: cover !important;
}

:deep(.el-carousel__container) {
    height: 360px;
}

:deep(.el-carousel__container img) {
    width: 600px;
    height: 360px;
}

// 合作伙伴活动

.p_gridbox {
    background: url(../../assets/img/1考试须知.png) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

.p_gridbox2 {
    background: url(../../assets/img/2考试时间.png) no-repeat;
}

.p_gridbox .w_grid {
    width: 50%;
    margin-left: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 50px;
}

.p_gridbox .w_grid h2 {
    font-weight: bold;
    font-size: 32px;
}

.p_gridbox .w_grid .w_text {
    padding: 10px 0;
}

.p_gridbox .w_grid .w_text p {
    line-height: 1.8;
    font-size: 16px;
    text-align: justify;
}

.p_gridbox .w_grid .w_fbtn {
    margin: 30px 0 0 0;
}

.p_gridbox .w_grid .w_fbtn .e_link {
    color: rgba(255, 255, 255, 1);
    border-width: 1px;
    border-style: none;
    border-color: transparent;
    background-color: #496bb2 !important;
    height: 47px;
    padding: 10px 40px;
    text-align: center;
    min-height: inherit;
    border-radius: 30px;
}

.h2Style {
    display: flex;
    align-items: center;
}

.h2Style {
    >img {
        margin-right: 10px;
    }
}</style>